<script setup lang="ts">
import { getActivityDetailApi, deleteActivityDataApi, deleteActivityCommentDataApi, getActivityCommentApi  } from "@@/apis/activity"
import { ChatDotSquare, Edit, Pointer, Position, ChatLineRound } from "@element-plus/icons-vue"
import { onMounted, reactive, ref } from "vue"
import { formatDateTime } from "@/common/utils/datetime.ts"

defineOptions({
  name: "Detail",
  inheritAttrs: false
})

const router = useRouter()
const route = useRoute()
const detailData = ref({})
const commentData = ref([])

function editActivity() {
  const id = route.query.id
  router.push({
    path: "/activity/operate",
    query: { id }
  })
}

function handleQuery() {
  const params = {
    activity_id: route.query.id
  }
  getActivityDetailApi(params).then((res) => {
    if (res.data) {
      detailData.value = res.data
      getActiveComment()
    }
  })
}

function deleteActivity() {
  ElMessageBox.confirm(`正在删除本次活动，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteActivityDataApi(route.query.id).then(() => {
      ElMessage.success("删除成功")
      router.push({
        path: "/activity/list"
      })
    })
  })
}

function reviewComments() {
  router.push({
    path: "/activity/review",
    query: { id: route.query.id }
  })
}

function getActiveComment() {
  getActivityCommentApi({
    type: 2,
    page: 1,
    page_size: 1000,
    activity_id: route.query.id
  }).then(({ data }) => {
    commentData.value = data.list
  }).catch(() => {
    commentData.value = []
  }).finally(() => {
    // loading.value = false
  })
}

function delComment(row) {
  ElMessageBox.confirm(`正在删除评论，确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    deleteActivityCommentDataApi(row.id).then(() => {
      ElMessage.success("删除成功")
      handleQuery()
    })
  })
}

function share() {
  const baseUrl = window.location.origin // 获取当前域名的基本 URL（协议 + 域名 + 端口）
  const fullPath = `${baseUrl}${"/dist/#/h5?id="}${route.query.id}` // 拼接完整的路由路径
  // 使用 window.open 在新标签页中打开该 URL
  window.open(fullPath, "_blank")
}

onMounted(() => {
  handleQuery()
})
</script>

<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>{{ detailData.title }}</span>
        </div>
        <div class="header-operate">
          <div class="operate-main">
            <div class="foot-operate">
              <!-- <el-button type="primary" :icon="Pointer" text bg>
                点赞<span class="ml-1">1999</span>
              </el-button> -->
              <el-button type="primary" :icon="ChatDotSquare" link @click="reviewComments()">
                <span class="mr-1">{{ detailData.comment_total }}</span>条待审核评论
              </el-button>
              <el-button type="primary" :icon="Position" link @click="share()">
                分享
              </el-button>
              <el-button type="primary" :icon="Edit" link @click="editActivity()">
                编辑
              </el-button>
              <el-button type="danger" link @click="deleteActivity()">
                删除
              </el-button>
            </div>
            <el-text type="info">
              发布时间：{{ formatDateTime(detailData.createtime) }}
            </el-text>
          </div>
        </div>
      </template>
      <div class="card-body">
        <div>
          <el-image v-if="detailData.image !== ''"  :src="detailData.image" fit="fill" />
        </div>
        <el-text>
          <div v-html="detailData.content" />
          <!-- {{ detailData.content }} -->
        </el-text>
      </div>
      <template #footer>
        <div class="footer-main">
          <div class="conmment-title">{{ commentData.length }}条评论</div>
          <div class="comment-item" v-for="(item, index) in commentData" :key="index">
            <div class="user-img">
              <el-icon v-if="!item.image || item.image === ''"><UserFilled /></el-icon>
              <el-image v-else style="width: 20px; height: 20px" :src="item.image" fit="fill" />
            </div>
            <div class="comment-box">
              <div class="comment-item-head">
                <div class="user-name">匿名用户 {{ index +1 }}</div>
                <div class="comment-del">
                  <!-- <el-button type="danger" link>
                    删除
                  </el-button> -->
                </div>
              </div>
              <div class="comment-item-body">{{ item.content }}</div>
              <div class="comment-item-footer">
                <div class="attribute">
                  <el-text type="info" class="mr-5">{{ formatDateTime(item.createtime * 1000) }}</el-text>
                  <!-- <el-text type="info">IP</el-text> -->
                </div>

                <div class="operate">
                  <!-- <el-button type="info" :icon="ChatLineRound" link>
                    回复
                  </el-button> -->
                  <el-button type="danger" link @click="delComment(item)">
                    删除
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.header-operate {
  padding-top: 15px;
  .operate-main {
    display: flex;
    .foot-operate {
      flex: 1;
      margin-right: 15px;
    }
  }
}
.card-body {
  // min-height: 580px;
}
.footer-main {
  .conmment-title {
    height: 30px;
    border-bottom: 1px solid #eeeeee;
  }
  .comment-item {
    padding: 15px 0;
    display: flex;
    .user-img {
      width: 20px;
      text-align: center;
    }
    .comment-box {
      flex: 1;
      padding-left: 10px;
      .comment-item-head {
        display: flex;
        .user-name {
          flex: 1;
        }
        .comment-del {

        }
      }
      .comment-item-body {
        padding: 10px 0;
      }
      .comment-item-footer {
        display: flex;
        justify-content: space-between;
        .attribute {
          display: flex;
        }
        .operate {
          display: flex;
        }
      }
    }
  }
}
</style>
